<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">

</head>
<body>
<div class="layui-fluid">
    <fieldset class="layui-elem-field layui-field-title">
        <div class="layui-field-box">
            <div class="layui-col-md12 layui-col-sm12 ">
                <form class="layui-form layui-form-pane" lay-filter="formEmp" id="formEmp">

                    <!--表单控件项：姓名，状态-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">员工姓名:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="empname" id="empname" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入员工姓名">
                        </div>
                        <label class="layui-form-label">员工编号:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="empnum" id="empnum" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入员工编号">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">状态:</label>
                        <div class="layui-input-block">
                            <input type="radio" name="empstatus" value="0" title='在职' checked>
                            <input type="radio" name="empstatus" value="1" title="离职">
                            <input type="radio" name="empstatus" value="2" title="休假">
                        </div>
                    </div>
                    <!--表单控件项：手机号码，性别-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号码:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="phonenumber" id="phonenumber" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入手机号码">
                        </div>
                        <label class="layui-form-label">类型:</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="gender" value="男" title='男' checked>
                            <input type="radio" name="gender" value="女" title="女">
                        </div>
                    </div>

                    <!--表单控件项：生日，入职时间-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">员工生日:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="birthdate" id="birthdate" lay-verify="required">
                        </div>
                        <label class="layui-form-label">入职时间:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="hiredate" id="hiredate" lay-verify="required" >
                        </div>
                    </div>
                    <!--表单控件项：员工工资，员工紧急联系人-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">员工工资:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="number" name="salary" id="salary" lay-verify="required" >
                        </div>
                        <label class="layui-form-label">紧急联系人:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="contactname" id="contactname" lay-verify="required" >
                        </div>
                    </div>
                    <!--表单控件项：员工职位-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">员工职位:</label>
                        <div class="layui-input-block">
                            <select name="jobid" id="jobid">
                            </select>
                        </div>
                    </div>
                    <!--表单控件项：居住信息-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">居住信息:</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" name="address" id="address" lay-verify="required"
                                   lay-verType="tips" lay-reqText="请输入居住信息">
                        </div>
                    </div>



                    <div class="layui-form-item">
                        <label class="layui-form-label">额外信息:</label>
                        <div class="layui-input-block">
                            <textarea id="empinfo" name="empinfo" class="layui-textarea" placeholder="请填写员工额外信息"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">员工头像:</label>
                        <img class="layui-upload-img" id="ID-upload-demo-img"
                             style="width:92px;height: 92px;border: 1px solid rgba(0,0,0,0.1)">
                        <!--表单控件项：文件上传（员工头像）-->
                        <button class="layui-btn layui-btn-normal" type="button" id="btnUpdateEmpPhoto">
                            <i class="layui-icon layui-icon-upload"></i>
                            请上传员工头像
                        </button>
                    </div>

                    <!-- 提交按钮    -->
                    <div class="layui-form-item" style="text-align: right">
                        <button type="button" class="layui-btn layui-btn-warm" lay-submit id="addEmp">确认添加
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </fieldset>
</div>
<script src="../res/js/config.js"></script>
<script src="../res/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer', 'jquery', 'upload'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        //获取文件上传组件
        var upload = layui.upload;
        //日期组件
        var laydate = layui.laydate;

        // 渲染
        laydate.render({
            elem: '#birthdate'
        });
        laydate.render({
            elem: '#hiredate'
        });

        //请求专辑列表接口获取所有专辑信息并显示到列表中（动态下拉列表）
        $.get(`http://localhost:80/job/listAll`, function (resp) {
            //获取所有的专辑列表
            let list = resp.data;
            //遍历集合
            $(list).each((i, job) => {
                $('#jobid').append(`<option value="${job.jobid}">${job.jobname}</option>`);
            })
            //表单重新渲染
            form.render($('#jobid'));
        })


        //对文件上传控件渲染
        upload.render({
            elem: '#btnUpdateEmpPhoto',
            auto: false,  /*禁止文件选择完成之后自动上传*/
            field: 'myfile',  /*设置文件域字段名，后端接口可以根据该字段名得到文件*/
            accept: 'file', /*设置允许上传的文件类型*/
            acceptMime: 'image/*', /*打开文件筛选框时过滤所需的文件（图片）*/
            choose: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });
            }
        })

        //为指定的按钮绑定点击事件
        $('#addEmp').on('click', function () {
            //为表单绑定提交事件
            form.submit('formEmp', function (data) {
                // "" null --> false
                if (!data.field.myfile) {
                    layer.msg('请选择资源文件!');
                    return false;
                }
                //发送ajax请求
                //显示加载动画
                let index = layer.load(1);
                //讲表单数据包装成formData对象(含文件)   原生js和jquery
                let formData = new FormData($('#formEmp')[0])

                $.ajax({
                    type: 'post',        //设置请求方式：post提交
                    url: `http://localhost:80/emp/add`,   //服务端接收的地址
                    data: formData,       //提交到服务端的数据
                    processData: false,   //禁止将提交的数据转换为查询字符串（ key=value&key=value）
                    contentType: false,    //配合上述属性，禁止将数据以查询字符串方式提交
                    success: function (resp) {
                        layer.close(index);
                        layer.msg(resp.msg)
                    }
                })
                return false;
            })
        })

    })
</script>
</body>
</html>